<template>
  <TreeTableLayout>
    <template #tree>
      <Tree @query="doQuery" gatewayType="-1"></Tree>
    </template>
    <template #table>
      <RightTableLayout :slotName="['operation', 'table', 'pagination']">
        <template #operation>
          <el-button @click="addMail()">{{ i18n.fy.addccmail }}</el-button>
        </template>
        <template #table>
          <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" height="100%" border v-loading="data.loading"
            :element-loading-text="i18n.fy.loading">
            <el-table-column prop="id" label="ID" width="230" align="center" />
            <el-table-column prop="mailAddr" :label="i18n.fy.ccmail" align="center" />
            <el-table-column :label="i18n.fy.operation" width="320">
              <template #default="scope">
                <el-button type="warning" size="small" @click="updateMail(scope.row)">{{ i18n.fy.modifyemail
                  }}</el-button>
                <el-button type="danger" size="small" @click="del(scope.row)">{{ i18n.fy.deleteemail }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #pagination>
          <el-pagination @size-change="onChanSize" @current-change="onChanPage"
            v-model:current-page="data.queryForm.page" v-model:page-size="data.queryForm.limit" :total="data.total" />
        </template>
      </RightTableLayout>
    </template>
  </TreeTableLayout>
  <div id="saveOrUpdateDiv" style="display: none; padding: 20px; text-align: center">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
      <input type="hidden" class="deviceFid" name="deviceFid" />
      <input type="hidden" name="id" />
      <div class="layui-form-item">
        <label class="layui-form-label">{{ i18n.fy.emailaddress }}:</label>
        <div class="layui-input-block">
          <input type="text" name="mailAddr" lay-verify="email" :placeholder="i18n.fy.petea" autocomplete="off"
            class="layui-input" />
        </div>
      </div>
      <br /><br /><br />
      <div class="layui-form-item" style="text-align: center">
        <div class="layui-input-block">
          <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
            lay-filter="doSubmit" lay-submit="" id="doSubmit">{{ i18n.fy.submit }}</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script setup>
defineOptions({ name: "MailConfig" });
import Tree from "@/components/tree.vue";
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import TreeTableLayout from "@/views/workbench/components/TreeTableLayout.vue";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let $httpUrl = globalProperties.$httpUrl;
let data = reactive({
  queryForm: { page: 1, limit: 100 },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    role: [{ required: true, message: "请选择岗位", trigger: "change" }],
  },
});

const addMail = () => {
  mainIndex = layer.open({
    type: 1,
    title: "新增邮箱",
    content: $("#saveOrUpdateDiv"),
    area: ["50%", "60%"],
    success: function (index) {
      //清空表单数据
      $("#dataFrm")[0].reset();
      url = $httpUrl + "/mail/addMail";
      form.on("submit(doSubmit)", function (obj) {
        //序列化表单数据
        var params = $("#dataFrm").serialize();
        $.post(url, params, function (res) {
          if (res.code == 200) {
            layer.close(mainIndex);
            layer.msg("操作成功！");
            getList();
          } else {
            layer.msg(res.msg);
          }
        });
        return false;
      });
    },
  });
};
const updateMail = (data) => {
  mainIndex = layer.open({
    type: 1,
    title: "修改邮箱",
    content: $("#saveOrUpdateDiv"),
    area: ["50%", "60%"],
    maxmin: true,
    success: function (index) {
      form.val("dataFrm", data);
      url = $httpUrl + "/mail/updateMail";
      //分组新增修改提交
      form.on("submit(doSubmit)", function (obj) {
        //序列化表单数据
        var params = $("#dataFrm").serialize();
        $.post(url, params, function (res) {
          if (res.code == 200) {
            layer.close(mainIndex);
            layer.msg("操作成功！");
            getList();
          } else {
            layer.msg(res.msg);
          }
        });
        return false;
      });
    },
  });
};

const onChanSize = (e) => {
  //修改分页数
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
};
const onChanPage = (e) => {
  //修改分页
  data.queryForm.page = e;
  getList();
};

const del = (data) => {
  // 删除
  ElMessageBox.confirm("确认删除邮箱?", "提示").then(() => {
    // $axios.post() / $axios.get()
    $.post($httpUrl + "/mail/deleteMail", { id: data.id }, function (res) {
      if (res.code == 200) {
        layer.msg(res.msg);
        getList();
      } else {
        layer.msg(res.msg);
      }
    });
  });
};

const getList = (params) => {
  // 获取表格数据
  data.loading = true;
  $axios.get("/mail/queryMailList", { ...data.queryForm, ...params }).then((res) => {
    data.loading = false;
    data.tableData = res.data.data.records;
    data.total = res.data.data.total;
  });
};
const doQuery = (params) => {
  getList(params);
};
//全局弹出
var mainIndex;
var $ = "";
var layer = "";
var form = "";
var table = "";
var dropdown = "";
var sdTable = "";
var slider = "";
var slider1 = "";
var slider2 = "";
let _sensitivity = 0;
var secIndex = "";
var lightNum = 0;
var url;
onBeforeMount(() => {
  layui.extend({}).use(["jquery", "layer", "form", "table", "slider", "dropdown"], function () {
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form;
    table = layui.table;
    dropdown = layui.dropdown;
    sdTable = layui.table;
    slider = layui.slider;
    slider1 = layui.slider;
    slider2 = layui.slider;
    _sensitivity = 0;
    //第二弹出
    secIndex = "";
    //渲染滑块
    lightNum = 0;
    slider.render({
      elem: "#slideTest1", //绑定元素
      input: true, //输入框
      min: 0,
      change: function (value) {
        lightNum = value;
      },
    });
  });
  getList({});
});
</script>
